<template>
  <!-- 广告编辑 -->
  <div class="app-container">
    <el-form ref="form" :inline="true" :model="form" label-width="130px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="广告名称" prop="name">
            <el-input v-model="form.name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="描述">
            <el-input v-model="form.descript" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Ios" prop="ios">
            <el-radio-group v-model="form.ios">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Android" prop="android">
            <el-radio-group v-model="form.android">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="跳转类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择" clearable @change="handleChange">
              <el-option
                v-for="(item,index) in jumpType"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- {{form.type}} -->
        <!-- H5链接 -->
        <el-col :span="24">
          <el-form-item label="H5链接" v-if="form.type == 1" prop="json_data">
            <el-input v-model="form.json_data" clearable />
          </el-form-item>
        </el-col>
        <!-- {{form.json_data}} -->
        <!-- 选择week -->
        <el-col :span="24">
          <el-form-item label="week" v-if="form.type == 100" prop="json_data">
            <el-input v-model="form.json_data" clearable />
          </el-form-item>
        </el-col>
        <!-- {{form.json_data}}-{{form.type}} -->
        <!-- 选择商品 -->
        <el-col :span="24">
          <el-form-item label="选择商品" v-if="form.type == 2" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 选择商品分类 -->
        <el-col :span="24">
          <el-form-item label="选择商品分类" v-if="form.type == 5" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 选择项目 -->
        <el-col :span="24">
          <el-form-item label="选择项目" v-if="form.type == 6" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 选择项目分类 -->
        <el-col :span="24">
          <el-form-item label="选择项目分类" v-if="form.type == 7" prop="json_data">
            <!--  :filter-method="handleFilterChange"   remote
              clearable
            :remote-method="remoteMethod"-->
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              filterable
              remote
              clearable
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 选择服务 -->
        <el-col :span="24">
          <el-form-item label="选择服务" v-if="form.type == 30" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 选择会员卡 -->
        <el-col :span="24">
          <el-form-item label="选择会员卡" v-if="form.type == 31" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="remoteMethod"
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- :remote-method="remoteMethod"
        remote-->
        <!-- 邀请有你 选择   -->
        <el-col :span="24">
          <el-form-item label="选择活动" v-if="form.type == 26" prop="json_data">
            <el-select
              v-model="form.json_data"
              placeholder="请选择"
              clearable
              filterable
              @change="handleChange1"
            >
              <el-option
                v-for="(item,index) in shopType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="有效期" width="236" prop="dates">
            <el-date-picker
              v-model="dates"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="['00:00:00', '23:59:59']"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上架状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">上架</el-radio>
              <el-radio :label="2">下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="image" label="上传图片">
            <newUpload
              ref="uploadImg"
              :fileNum="1"
              :file-list="fileList"
              :width="imgWeith"
              :height="imgHeight"
            ></newUpload>
            <p>图片上传大于1080*1920</p>
            <!-- <newUpload ref="uploadImg" :fileNum="1" :file-list="fileList" :size-number="2"></newUpload> -->
            <!-- <p class="msgText">将选择本地图片进行添加</p> -->
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <div class="allCenter">
              <el-button type="primary" @click="submit('form')">提交</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {
  details,
  edit,
  selectList,
  allType,
  invitedList,
} from "@/api/advertisingMange";
import newUpload from "@/components/imgUpload/shopImgUp1";
export default {
  components: { newUpload },
  data() {
    return {
      form: {
        name: "",
        week: "",
        descript: "",
        ios: "",
        android: "",
        type: "",
        json_data: "",
        start_time: "",
        end_time: "",
        image: "",
        status: "",
        // links: ""
      },
      dates: [],
      jumpType: [], //跳转类型
      jump_id: "", //商品/项目/h5分类id
      shopType: [], //选择商品
      fileList: [],
      list: [],
      imgWeith: 1080,
      imgHeight: 1920,
      rules: {
        name: [{ required: true, message: "请输入广告名称", trigger: "blur" }],
        ios: [{ required: true, message: "请勾选是否显示", trigger: "blur" }],
        android: [
          { required: true, message: "请勾选是否显示", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择跳转类型", trigger: "change" },
        ],
        json_data: [
          {
            required: true,
            message: "请输入配置信息",
            trigger: ["blur", "change"],
          },
        ],
        image: [{ required: true, message: "请上传图片" }],
      },
    };
  },
  created() {
    this.getDetail({ id: this.$route.query.id });
    this.getType();
    // console.log('shopType',this.shopType)
  },
  methods: {
    // 获取所有跳转类型
    getType() {
      allType()
        .then((res) => {
          if (res.data.code == 200) {
            let arr = [];
            res.data.data.forEach((item) => {
              arr.push({
                name: item.name,
                id: item.id,
              });
              this.jumpType = arr;
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.errorStatus(err.msg);
        });
    },
    // 获取详情
    getDetail(id) {
      details(id)
        .then((res) => {
          if (res.data.code == 200) {
            this.form = res.data.data;
            if (this.form.type) {
              this.handleChange(this.form.type);
            }
            this.form.json_data = this.form.show_name;
            let arr = [];
            if (this.form.start_time && this.form.end_time) {
              arr[0] = this.form.start_time;
              arr[1] = this.form.end_time;
            }
            this.dates = arr;
            console.log("imgUrlPrefix", localStorage.getItem("imgUrlPrefix"));
            this.fileList = [
              { url: localStorage.getItem("imgUrlPrefix") + this.form.image },
            ];
            this.$refs.uploadImg.getLength(this.fileList);
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.errorStatus(err.mag);
        });
    },
    // handleFilterChange(val) {
    //   if (val) {
    //     let data = { keyword: val, type: this.form.type };
    //     selectList(data).then(res => {
    //       if (res.data.code == 0) {
    //         let arr = [];
    //         res.data.data.forEach(item => {
    //           arr.push({ label: item.name, id: item.id, value: item.id });
    //         });
    //         this.shopType = arr;
    //         console.log("shop", this.shopType);
    //       }
    //     });
    //   } else {
    //     console.log(999);
    //     this.shopType = this.list;
    //   }
    // },
    // 远程搜索
    remoteMethod(query) {
      let data = { keyword: query, type: this.form.type };
      if (query !== "") {
        selectList(data).then((res) => {
          if (res.data.code == 0) {
            let arr = [];
            res.data.data.forEach((item) => {
              arr.push({ label: item.name, id: item.id, value: item.id });
            });
            this.shopType = arr;
            // console.log("shop", this.shopType);
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
          }
        });
      } else {
        // console.log(999);
        this.form.json_data = "";
        let data = { type: this.form.type };
        selectList(data).then((res) => {
          if (res.data.code == 0) {
            // console.log(666);
            let arr = [];
            res.data.data.forEach((item) => {
              arr.push({ label: item.name, id: item.id, value: item.id });
            });
            this.shopType = arr;
            // console.log("888", this.shopType);
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
          }
        });
      }
    },

    // 跳转类型切换
    handleChange(e) {
      console.log("e", e);
      this.form.json_data = "";
      let data = { type: e };
      if (e == 26) {
        let obj = { json_data: e };
        invitedList(obj)
          .then((res) => {
            if (res.data.code == 200) {
              console.log("res", res.data.data);
              let arr = [];
              res.data.data.forEach((item) => {
                arr.push({
                  label: item.activity_name,
                  id: item.id,
                  value: item.id,
                });
              });
              this.shopType = arr;
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning",
              });
            }
          })
          .catch((err) => {
            this.errorStatus(err.msg);
          });
      } else {
        selectList(data)
          .then((res) => {
            if (res.data.code == 0) {
              let arr = [];
              res.data.data.forEach((item) => {
                arr.push({ label: item.name, id: item.id, value: item.id });
              });
              this.list = arr;
              this.shopType = arr;
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning",
              });
            }
          })
          .catch((err) => {
            this.errorStatus(err.msg);
          });
      }
    },
    // 下拉数据获取id
    handleChange1(e) {
      this.jump_id = e;
    },
    submit(form) {
      this.form.image = this.$refs.uploadImg.submitUpload()[0];
      if (this.form.type == 1 || this.form.type == 100) {
        this.links = this.form.json_data;
        this.jump_id = "";
      } else if (this.form.type == 0) {
        this.links = "";
        this.form.json_data = "";
        this.jump_id = "";
      } else {
        this.links = "";
        this.form.json_data = JSON.stringify({ id: this.form.json_data });
      }
      let datas = {
        id: this.$route.query.id,
        name: this.form.name,
        ios: this.form.ios,
        android: this.form.android,
        desc: this.form.descript,
        status: this.form.status,
        image: this.form.image,
        start_time: this.dates[0],
        end_time: this.dates[1],
        type: this.form.type,
        json_data:
          this.form.type == 1 || this.form.type == 100
            ? ""
            : this.form.json_data,
        links: this.links,
        jump_id: this.jump_id,
      };
      this.$refs[form].validate((valid) => {
        if (valid) {
          edit(datas)
            .then((res) => {
              if (res.data.code == 200) {
                this.succStatus("编辑成功");
                this.$router.push("/advertisingList");
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "warning",
                });
              }
            })
            .catch((err) => {
              this.errorStatus(err.msg);
            });
        }
      });
    },
    // // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
  },
};
</script>
<style scoped>
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.allCenter {
  margin-left: 130px;
}
</style>